<template lang="html">
  <div class="ripple-effect" :class="'ripple-effect-' + color" @click="ripple($event)">
    <b class="ink" ref="ink"></b>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'ripple-btn',
  props: {
    color: {
      type: String,
      default: 'white'
    }
  },
  methods: {
    ripple(event) {
      var target = event.currentTarget;
      var ink = this.$refs.ink;
      if(!ink) {
        ink = document.createElement('b');
        target.appendChild(ink);
      }
      ink.className = 'ink';
      var width = ink.offsetWidth;
      var height = ink.offsetHeight;
      if(!width || !height) {
        var d = Math.max(target.offsetWidth, target.offsetHeight);
        ink.style.width = d + 'px';
        ink.style.height = d + 'px';
        width = height = d;
      }
      console.log(target.offsetLeft);
      var x = event.pageX - target.offsetLeft - width / 2;
      var y = event.pageY - target.offsetTop - height / 2;

      ink.style.left = x + 'px';
      ink.style.top = y + 'px';
      ink.className = 'ink animate';
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/scss/default.scss";
$colors: (red: $red, blue: $blue, green: $green, yellow: $yellow, white: $white);
@mixin setBackground {
  @each $key, $value in $colors {
    &.ripple-effect-#{$key} {
      .ink {
        background-color: $value;
      }
    }
  }
}
.ripple-effect {
  position: relative;
  // overflow: hidden;
  transform: translate3d(0, 0, 0);
  @include setBackground;
}
.ink {
  display: block;
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  background-color: #ffffff;
  opacity: 1;
}
.ink.animate {
  animation: ripple .5s linear;
}
@keyframes ripple {
  100% {
    // opacity: 0;
    transform: scale(2.5);
  }
}
</style>
